AI Lessons
Lesson 25: Adding LLM to our project

Purpose: To integrate a Large Language Model (LLM) into a simple chatbot project to generate responses.

No. of Classes

1 - (Time : 1 hour 30 minutes, Laptops/desktops : 10, Students strength : 15 to 20).

Materials Required

Laptop / Desktop with Internet connections / Wi-Fi.

Curriculum Content

3. Programming Foundations for AI

  • 3.6 User input and interaction

6. Working with Language Models

  • 6.1 Calling a language model

7. Designing AI-enabled Systems

  • 7.3 Integrating models into applications
  • 7.4 Multimodal and multi-model workflows
  • 7.5 Model pipelining
Prior knowledge
  • Basic p5.js canvas rendering and handling DOM elements (inputs and buttons).
  • Basic knowledge of tokens and embeddings.
  • Worked with asynchronous operations (async/await).
Exercises

Exercise (1)


  • Connect to an LLM API using WebLLM modules from a p5.js sketch, send a single hardcoded prompt, and display the returned text on the canvas.

Exercise (2)


  • Add a text input box so the user can type their own question, send it to the model and show the reply.

Solutions


Teacher's Instruction:
  1. Explain that WebLLM allows running or calling a language model directly within client-side Web browser code without needing complex backend servers.
  2. Guide students through initializing the engine in p5.js, highlighting why model loading takes time and needs a loading state visual.
  3. Points to Ponder:
    • Why is loading or calling an LLM asynchronous (`async`/`await`), and what would happen to our application UI if the code executed synchronously instead?